<template>
  <view class="uni-steps">
    <view class="uni-steps__column">
      <view class="uni-steps__column-text-container">
        <view v-for="(item, index) in options" :key="index" class="uni-steps__column-text">
          <text
            class="uni-steps__column-title"
            :style="{ color: index === active ? activeColor : deactiveColor }"
          >
            {{ item.title }}
          </text>
          <text v-if="item.desc" class="uni-steps__column-desc" :style="{ color: deactiveColor }">
            {{ item.desc }}
          </text>
          <text v-if="item.date" class="uni-steps__column-desc" :style="{ color: deactiveColor }">
            {{ item.date }}
          </text>
        </view>
      </view>
      <view class="uni-steps__column-container">
        <view
          v-for="(_, index) in options"
          :key="index"
          class="uni-steps__column-line-item"
          :class="{
            'is-before': index === 0,
            'is-middle': index === 1,
            'is-after': index === 2
          }"
        >
          <view v-if="index === active" class="uni-steps__column-check">
            <uni-icons :color="activeColor" :type="activeIcon" size="16" />
          </view>
          <view v-else-if="index < active" class="uni-steps__column-check">
            <uni-icons color="#939393" :type="activeIcon" size="16" />
          </view>
          <view
            v-else
            class="uni-steps__column-circle"
            :style="{ backgroundColor: index < active ? activeColor : '#fff' }"
          />
          <view
            :class="[
              'uni-steps__column-line',
              'uni-steps__column-line--after',
              index === active
                ? 'uni-steps__check-line'
                : index === options.length - 1
                ? 'uni-steps__last-line'
                : index < active
                ? 'uni-steps__prev-line'
                : ''
            ]"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * Steps 步骤条
   * @description 评分组件
   * @tutorial https://ext.dcloud.net.cn/plugin?id=34
   * @property {Number} active 当前步骤
   * @property {String} direction = [row|column] 当前步骤
   * 	@value row 横向
   * 	@value column 纵向
   * @property {String} activeColor 选中状态的颜色
   * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
   */

  export default {
    name: 'UniSteps',
    props: {
      activeColor: {
        // 激活状态颜色
        type: String,
        default: '#2979FF'
      },
      deactiveColor: {
        // 未激活状态颜色
        type: String,
        default: '#B7BDC6'
      },
      active: {
        // 当前步骤
        type: Number,
        default: 0
      },
      activeIcon: {
        // 当前步骤
        type: String,
        default: 'checkbox-filled'
      },
      options: {
        type: Array,
        default() {
          return [];
        }
      } // 数据
    }
  };
</script>

<style lang="scss">
  $uni-primary: #2979ff !default;
  $uni-border-color: #ededed;

  .uni-steps {
    /* #ifndef APP-NVUE */
    display: flex;
    width: 100%;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
    flex-direction: column;
  }

  .uni-steps__row {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
  }

  .uni-steps__column {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row-reverse;
  }

  .uni-steps__column-text-container {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    flex: 1;
  }

  .uni-steps__column-text {
    padding-bottom: 48rpx;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
  }

  .uni-steps__column-title {
    margin-bottom: 16rpx;
    font-size: 28rpx;
    text-align: left;
    line-height: 40rpx;
  }

  .uni-steps__column-desc {
    font-size: 24rpx;
    text-align: left;
    line-height: 40rpx;
    color: #939393;
  }

  .uni-steps__column-container {
    /* #ifndef APP-NVUE */
    display: inline-flex;
    /* #endif */
    width: 30px;
    flex-direction: column;
    padding-top: 5px;
  }

  .uni-steps__column-line-item {
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .uni-steps__column-line-item.is-before {
    height: 72px;
  }

  .uni-steps__column-line-item.is-middle {
    height: 92px;
  }

  .uni-steps__column-line {
    width: 12rpx;
    background-color: rgba(196, 196, 196, 0.2);
  }

  .uni-steps__column-line--after {
    flex: 1;
    transform: translate(0px, 0px);
  }

  .uni-steps__column-line--before {
    height: 6px;
    transform: translate(0px, -13px);
  }

  .uni-steps__column-circle {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #fff;
    border: 4rpx solid rgba(196, 196, 196, 0.2);
  }

  .uni-steps__column-check {
    position: absolute;
    top: -2px;
    z-index: 1;
    height: 14px;
    line-height: 14px;
    background-color: #fff;
    border-radius: 50%;
  }

  .uni-steps__check-line {
    background: linear-gradient(180deg, rgba(4, 196, 132, 0.2) 0%, rgba(196, 196, 196, 0.2) 100%);
  }

  .uni-steps__prev-line {
    background: linear-gradient(180deg, rgba(61, 61, 61, 0.2) 0%, rgba(196, 196, 196, 0.2) 100%);
  }

  .uni-steps__last-line {
    background: transparent;
  }
</style>
